<template>
    <div>
        <div class="my-radio" :class="{
            'pl-2 pr-2': props.label,
            'pb-[10px]': props.label && props.mode == 'view',
            'pt-4': props.label && props.mode == 'view'
        }">
            <!-- 標題 -->
            <div :class="{
                'mb-4': props.mode != 'view',
                'mb-1': props.mode == 'view'
            }" class="flex" v-if="props.label" :style="{ opacity: props.label == '#' ? 0 : 1 }">
                <div class="text-error text-[14px] leading-[14px]" v-if="props.required == true">*</div>
                <div :class="props.labelClass" class="text-[14px] leading-[14px] font-[500]">{{ $t(props.label) }}</div>
            </div>
            <div>
                <v-radio-group :inline="props.inline" :rules="props.rules" :hint="props.hint" :color="props.color"
                    v-model="value" class="text-text--primary relative"
                    :readonly="props.readonly || props.mode == 'view'"
                    :disabled="props.disabled || props.mode == 'view'">
                    <v-radio :value="props.itemValue ? item[props.itemValue] : item"
                        v-for="(item, index) in props.items" :key="index" class="pt-2 pb-2" :class="{
                            'mb-1': !props.inline && index != props.items.length - 1,
                            'mb-0': !props.inline && index == props.items.length - 1,
                            'pl-2': props.showFoucsBg,
                            'pr-2': props.showFoucsBg,
                            'rounded-[8px]': props.showFoucsBg,
                            'bg-foucs-bg': props.showFoucsBg && item[props.itemValue] == value,
                            'mr-6': props.inline
                        }">
                        <template v-slot:label>
                            <div class="align-center pl-2">
                                <div class="flex align-center mr-2">
                                    <!-- 圆点 -->
                                    <!-- <div class="rounded-[50%] w-[8px] h-[8px] mr-[6px]"
                                        v-if="item[props.itemLabelColor]" :style="{
                                            backgroundColor: item[props.itemLabelColor]
                                        }"></div> -->
                                    <!-- 标题 -->
                                    <div class="!opacity-100 text-[14px] leading-[18px]">
                                        <span class="font-[500]" :class="{
                                            'text-text--primary': !props.itemLabelColor || !item[props.itemLabelColor]
                                        }" :style="{
                                            color: props.itemLabelColor && item[props.itemLabelColor]
                                        }">{{ item.i18n ? $t(item.i18n) : (props.itemTitle && item[props.itemTitle] ?
                                            $t(item[props.itemTitle]) : (props.itemValue && item[props.itemValue] ?
                                                item[props.itemValue] : item)) }}</span>
                                        <!-- 值 -->
                                        <span class="text-text--secondary ml-1"
                                            v-if="props.showValue && (props.itemTitle && item[props.itemTitle])">({{
                                                item.value }})</span>
                                    </div>
                                </div>
                                <!-- 描述 -->
                                <div :class="{ 'mt-1': mobile }"
                                    class="text-text--secondary !opacity-100 text-[12px] leading-[14px]"
                                    v-if="!props.inline && props.itemDesc && item[props.itemDesc] && props.showDesc">
                                    <!-- 描述文案 -->
                                    <mrc_ess_RichTextHtml :text="item[props.itemDesc]"></mrc_ess_RichTextHtml>
                                </div>
                            </div>
                        </template>
                    </v-radio>
                </v-radio-group>
                <!-- 新提示 -->
                <mrc_ess_InputBottomTip :tip="props.tip" :tipDetail="props.tipDetail"></mrc_ess_InputBottomTip>
            </div>
        </div>
        <!-- 分割线 -->
        <v-divider v-if="props.mode == 'view'"></v-divider>
        <!-- 间距 -->
        <div class="pointer-events-none" v-if="props.mode != 'view' || props.spacing == true" :style="{
            height: props.spacingHeight + 'px'
        }"></div>
    </div>
</template>

<script lang="ts" setup>
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
    mode: {
        type: String,
        default: "edit"
    },
    spacing: {
        type: Boolean,
        default: false
    },
    spacingHeight: {
        type: [String, Number],
        default: 32
    },
    color: {
        type: String,
        default: "primary"
    },
    label: {
        type: String,
        default: ""
    },
    labelClass: {
        type: String,
        default: "text-text--primary"
    },
    required: {
        type: Boolean,
        default: false
    },
    hint: {
        type: String,
        default: ""
    },
    rules: {
        type: Object,
        default: []
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    items: {
        type: Array,
        default: []
    },
    // 是否显示值
    showValue: {
        type: Boolean,
        default: false
    },
    // 是否显示描述
    showDesc: {
        type: Boolean,
        default: true
    },
    // 是否显示选中的背景
    showFoucsBg: {
        type: Boolean,
        default: false
    },
    // 标题字段
    itemTitle: {
        type: String,
        default: "title"
    },
    // 值字段
    itemValue: {
        type: String,
        default: "value"
    },
    // 描述字段
    itemDesc: {
        type: String,
        default: "desc"
    },
    // 标签颜色字段
    itemLabelColor: {
        type: String,
        default: "labelColor"
    },
    inline: {
        type: Boolean,
        default: false
    },
    tip: {
        type: String,
        default: ""
    },
    tipDetail: {
        type: String,
        default: ""
    }
})
const value = defineModel();
</script>

<style scoped>
.my-radio :deep(.v-input__details) {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -18px;
    pointer-events: none;
}

.my-radio :deep(.v-label) {
    opacity: 1 !important;
}

.my-radio :deep(.v-selection-control--disabled) {
    opacity: 1 !important;
}

.my-radio :deep(.v-selection-control--disabled .v-selection-control__input) {
    color: #777C86 !important;
}

.my-radio :deep(.v-input--readonly .v-selection-control__input) {
    color: #777C86 !important;
}

.my-radio :deep(.v-selection-control) {
    align-items: flex-start;
}

.my-radio :deep(.v-selection-control__wrapper) {
    height: 20px;
    width: 20px;
}

.my-radio :deep(.v-selection-control__input) {
    width: 100%;
    height: 100%;
}

.my-radio :deep(.v-icon) {
    font-size: 20px;
}
</style>